<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AI文生图 - UI/UX原型</title>
    <style>
      /* 基础样式重置 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      }

      :root {
        /* Material Design 主题色 - 紫色系 */
        --primary-color: #6200ee;
        --primary-variant: #3700b3;
        --secondary-color: #03dac6;
        --secondary-variant: #018786;
        --background: #ffffff;
        --surface: #ffffff;
        --error: #b00020;
        --on-primary: #ffffff;
        --on-secondary: #000000;
        --on-background: #000000;
        --on-surface: #000000;
        --on-error: #ffffff;

        /* 自定义颜色 */
        --gray-light: #f5f5f5;
        --gray-medium: #e0e0e0;
        --gray-dark: #757575;
        --text-primary: rgba(0, 0, 0, 0.87);
        --text-secondary: rgba(0, 0, 0, 0.6);
        --text-disabled: rgba(0, 0, 0, 0.38);
      }

      body {
        background-color: var(--gray-light);
        color: var(--text-primary);
        line-height: 1.5;
      }

      /* 容器样式 */
      .container {
        max-width: 480px;
        margin: 0 auto;
        background-color: var(--background);
        min-height: 100vh;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        position: relative;
      }

      /* 顶部导航栏 */
      .app-bar {
        background-color: var(--primary-color);
        color: var(--on-primary);
        padding: 16px;
        display: flex;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 10;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .app-bar h1 {
        font-size: 20px;
        font-weight: 500;
        margin-left: 8px;
      }

      /* 主要内容区 */
      .main-content {
        padding: 16px;
      }

      /* 文本输入区 */
      .input-section {
        margin-bottom: 24px;
      }

      .input-label {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 8px;
      }

      .text-input {
        width: 100%;
        padding: 16px;
        border: 1px solid var(--gray-medium);
        border-radius: 4px;
        font-size: 16px;
        min-height: 120px;
        resize: none;
        transition: border 0.3s;
      }

      .text-input:focus {
        border-color: var(--primary-color);
        outline: none;
        box-shadow: 0 0 0 2px rgba(98, 0, 238, 0.2);
      }

      .char-count {
        text-align: right;
        font-size: 12px;
        color: var(--text-secondary);
        margin-top: 4px;
      }

      /* 图片类型选择 */
      .type-selector {
        margin-bottom: 24px;
      }

      .type-options {
        display: flex;
        gap: 12px;
        margin-top: 8px;
      }

      .type-option {
        flex: 1;
        text-align: center;
        border: 2px solid var(--gray-medium);
        border-radius: 8px;
        padding: 12px 8px;
        cursor: pointer;
        transition: all 0.2s;
      }

      .type-option.active {
        border-color: var(--primary-color);
        background-color: rgba(98, 0, 238, 0.05);
      }

      .type-option-icon {
        font-size: 24px;
        margin-bottom: 4px;
        color: var(--gray-dark);
      }

      .type-option.active .type-option-icon {
        color: var(--primary-color);
      }

      .type-option-text {
        font-size: 14px;
        font-weight: 500;
      }

      /* 提示词案例 */
      .prompt-examples {
        margin-bottom: 24px;
      }

      .prompt-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
      }

      .prompt-chip {
        background-color: var(--gray-light);
        border-radius: 16px;
        padding: 8px 16px;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.2s;
        border: 1px solid var(--gray-medium);
      }

      .prompt-chip:hover {
        background-color: var(--gray-medium);
      }

      /* 生成按钮 */
      .generate-button {
        background-color: var(--primary-color);
        color: var(--on-primary);
        border: none;
        border-radius: 4px;
        padding: 12px 24px;
        font-size: 16px;
        font-weight: 500;
        width: 100%;
        cursor: pointer;
        transition: background-color 0.2s, transform 0.1s;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        margin-bottom: 24px;
      }

      .generate-button:hover {
        background-color: var(--primary-variant);
      }

      .generate-button:active {
        transform: translateY(1px);
      }

      /* 结果展示区 */
      .result-section {
        margin-top: 32px;
      }

      .result-image-container {
        width: 100%;
        aspect-ratio: 1 / 1;
        background-color: var(--gray-light);
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 16px;
      }

      .result-image {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }

      .placeholder-text {
        color: var(--text-secondary);
        font-size: 16px;
        text-align: center;
      }

      /* 图片操作按钮 */
      .image-actions {
        display: flex;
        gap: 12px;
        margin-top: 16px;
      }

      .image-action-button {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        border: none;
      }

      .save-button {
        background-color: var(--secondary-color);
        color: var(--on-secondary);
        box-shadow: 0 2px 4px rgba(3, 218, 198, 0.2);
      }

      .save-button:hover {
        background-color: var(--secondary-variant);
      }

      .regenerate-button {
        background-color: var(--gray-light);
        color: var(--text-primary);
        border: 1px solid var(--gray-medium);
      }

      .regenerate-button:hover {
        background-color: var(--gray-medium);
      }

      .button-icon {
        font-size: 18px;
      }

      /* 加载动画 */
      .loading-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.8);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 100;
        display: none;
      }

      .loading-spinner {
        width: 48px;
        height: 48px;
        border: 4px solid rgba(98, 0, 238, 0.2);
        border-top: 4px solid var(--primary-color);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 16px;
      }

      .loading-text {
        font-size: 16px;
        color: var(--primary-color);
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      /* 底部操作栏 */
      .action-bar {
        display: flex;
        justify-content: space-around;
        padding: 16px;
        border-top: 1px solid var(--gray-medium);
        background-color: var(--surface);
        position: sticky;
        bottom: 0;
      }

      .action-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: var(--text-secondary);
        font-size: 12px;
        border: none;
        background: none;
        cursor: pointer;
      }

      .action-icon {
        font-size: 24px;
        margin-bottom: 4px;
      }

      .action-button:hover {
        color: var(--primary-color);
      }

      /* 响应式调整 */
      @media (max-width: 480px) {
        .container {
          box-shadow: none;
        }
      }

      /* 辅助类 */
      .hidden {
        display: none;
      }

      .show {
        display: flex;
      }
    </style>
  </head>
  <body>
    <!-- 整体容器 -->
    <div class="container">
      <!-- 顶部导航栏 -->
      <header class="app-bar">
        <h1>AI文生图</h1>
      </header>

      <!-- 主要内容区 -->
      <main class="main-content">
        <!-- 文本输入区域 -->
        <section class="input-section">
          <div class="input-label">输入文字描述</div>
          <textarea
            class="text-input"
            placeholder="请输入您想要生成的图片描述，例如：'日落时分的海滩，金色的阳光洒在沙滩上'"
          ></textarea>
          <div class="char-count">0/200</div>
        </section>

        <!-- 图片类型选择 -->
        <section class="type-selector">
          <div class="input-label">选择图片类型</div>
          <div class="type-options">
            <!-- 人物类型选项 -->
            <div class="type-option" data-type="person">
              <div class="type-option-icon">👤</div>
              <div class="type-option-text">人物</div>
            </div>
            <!-- 动漫类型选项 -->
            <div class="type-option" data-type="anime">
              <div class="type-option-icon">🎭</div>
              <div class="type-option-text">动漫</div>
            </div>
            <!-- 通用类型选项 (默认选中) -->
            <div class="type-option active" data-type="general">
              <div class="type-option-icon">🖼️</div>
              <div class="type-option-text">通用</div>
            </div>
          </div>
        </section>

        <!-- 提示词案例 -->
        <section class="prompt-examples">
          <div class="input-label">提示词案例</div>
          <div class="prompt-chips">
            <div class="prompt-chip">日落时分的海滩</div>
            <div class="prompt-chip">繁华都市的夜景</div>
            <div class="prompt-chip">雪山下的森林小屋</div>
            <div class="prompt-chip">宇航员漫步太空</div>
            <div class="prompt-chip">梦幻童话城堡</div>
            <div class="prompt-chip">科技感未来城市</div>
          </div>
        </section>

        <!-- 生成按钮 -->
        <button class="generate-button">生成图片</button>

        <!-- 结果展示区 -->
        <section class="result-section hidden" id="resultSection">
          <div class="input-label">生成结果</div>
          <div class="result-image-container">
            <img
              class="result-image"
              src=""
              alt="生成的图片"
              id="resultImage"
            />
            <div class="placeholder-text" id="placeholderText">
              图片将在这里显示
            </div>
          </div>

          <!-- 图片操作按钮 -->
          <div class="image-actions">
            <!-- 保存到相册按钮 -->
            <button class="image-action-button save-button" id="saveButton">
              <span class="button-icon">💾</span>
              保存到相册
            </button>
            <!-- 重新生成按钮 -->
            <button
              class="image-action-button regenerate-button"
              id="regenerateButton"
            >
              <span class="button-icon">🔄</span>
              重新生成
            </button>
          </div>
        </section>
      </main>

      <!-- 加载动画 -->
      <div class="loading-container" id="loadingContainer">
        <div class="loading-spinner"></div>
        <div class="loading-text">正在生成图片，请稍候...</div>
      </div>
    </div>

    <script>
      // 模拟功能的简单交互脚本
      document.addEventListener("DOMContentLoaded", function () {
        // 获取DOM元素
        const textInput = document.querySelector(".text-input");
        const charCount = document.querySelector(".char-count");
        const typeOptions = document.querySelectorAll(".type-option");
        const promptChips = document.querySelectorAll(".prompt-chip");
        const generateButton = document.querySelector(".generate-button");
        const loadingContainer = document.getElementById("loadingContainer");
        const resultSection = document.getElementById("resultSection");
        const resultImage = document.getElementById("resultImage");
        const placeholderText = document.getElementById("placeholderText");
        const saveButton = document.getElementById("saveButton");
        const regenerateButton = document.getElementById("regenerateButton");

        // 字数统计功能
        textInput.addEventListener("input", function () {
          const count = this.value.length;
          charCount.textContent = `${count}/200`;

          // 超出字数限制时提示
          if (count > 200) {
            charCount.style.color = "var(--error)";
          } else {
            charCount.style.color = "var(--text-secondary)";
          }
        });

        // 图片类型选择功能
        typeOptions.forEach((option) => {
          option.addEventListener("click", function () {
            // 移除所有选项的active类
            typeOptions.forEach((opt) => opt.classList.remove("active"));
            // 为当前选项添加active类
            this.classList.add("active");
          });
        });

        // 提示词案例点击功能
        promptChips.forEach((chip) => {
          chip.addEventListener("click", function () {
            textInput.value = this.textContent;
            // 触发input事件以更新字数统计
            const event = new Event("input");
            textInput.dispatchEvent(event);
          });
        });

        // 生成图片函数
        function generateImage() {
          const text = textInput.value.trim();
          if (text.length === 0) {
            alert("请输入文字描述");
            return;
          }

          // 显示加载动画
          loadingContainer.style.display = "flex";

          // 模拟API调用延迟
          setTimeout(function () {
            // 隐藏加载动画
            loadingContainer.style.display = "none";

            // 显示结果区域
            resultSection.classList.remove("hidden");

            // 这里应该是实际API返回的图片
            // 这里使用占位图片模拟
            resultImage.src =
              "https://via.placeholder.com/400x400.png?text=AI+Generated+Image";
            placeholderText.style.display = "none";
            resultImage.style.display = "block";

            // 滚动到结果区域
            resultSection.scrollIntoView({ behavior: "smooth" });
          }, 2000);
        }

        // 生成按钮点击功能
        generateButton.addEventListener("click", generateImage);

        // 保存到相册按钮点击功能
        saveButton.addEventListener("click", function () {
          // 模拟保存图片到相册的功能
          alert("图片已保存到相册");
        });

        // 重新生成按钮点击功能
        regenerateButton.addEventListener("click", function () {
          // 重新调用生成图片函数
          generateImage();
        });
      });
    </script>
  </body>
</html>
